<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <link href="/asset/css/admin.css" rel="stylesheet" />
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<style id='panda-theme-color'></style>
</head>
<body class="theme-panda">
<div>
<div class="layui-card">
<div class="layui-card-body">
	<form class="layui-form toolbar">
		<div class="layui-form-item">
		<div class="layui-inline">
			<div class="layui-input-inline">
				<input type="text" name="keywords" placeholder="请输入人员姓名/手机号等" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<div class="layui-input-inline">
				<select name="status" id="status" lay-verify="" lay-search="" lay-filter="status"><option value="">【请选择状态】</option><option value="1">正常</option><option value="2">禁用</option></select><div class="layui-form-select"><div class="layui-select-title"><input type="text" placeholder="【请选择状态】" value="" class="layui-input"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">【请选择状态】</dd><dd lay-value="1" class="">正常</dd><dd lay-value="2" class="">禁用</dd></dl></div>
			</div>
		</div>
		<div class="layui-inline">
			<div class="layui-input-inline" style="width: auto;">
				<button class="layui-btn layui-btn-primary layui-btn-sm" lay-submit="" lay-filter="searchForm" id="search"><i class="layui-icon">&#xe615;</i>搜索查询</button>
				<a class="layui-btn layui-btn-sm layui-btn-primary btnOption"    href="javascript:"  lay-event="add"><i class="layui-icon layui-icon-add-1"></i>新增缴费</a>
				<!--a class="layui-btn layui-btn-sm layui-btn-primary" href="javascript:" id="excelImport"><i class="layui-icon layui-icon-add-1"></i>Excel导入</a-->
				<a class="layui-btn layui-btn-sm layui-btn-danger  btnBatchDrop" href="javascript:"  id="batchDrop" data-param="[]" lay-event="batchDrop"><i class="layui-icon layui-icon-delete"></i>批量删除</a>
				<input type="file" class="layui-btn layui-btn-sm layui-btn-primary" id="excelImport" multiple="multiple">
			</div>
		</div>
		</div>
	</form>

	<table class="layui-hide" id="tableList" lay-filter="tableList"></table>

	<script type="text/html" id="toolBar">
		<a class="layui-btn layui-btn-xs btnEdit" lay-event="edit" title="编辑"><i class="layui-icon">&#xe630;</i>编辑</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs btnDel" lay-event="del" title="删除"><i class="layui-icon">&#xe630;</i>删除</a>
	</script>

	<script type="text/html" id="statusTpl">
		<input type="checkbox" name="status" value="{{ d.id }}" lay-skin="switch" lay-text="正常|禁用" lay-filter="status" {{ d.status == 1 ? 'checked' : '' }} >
	</script>

	<script type="text/html" id="excelImportAns">
		{{# layui.each(d.data, function(file_index, item){ }}
			<blockquote class="layui-elem-quote">{{d.files[file_index].name}}</blockquote>
			<div class="layui-tab">
			  	<ul class="layui-tab-title">
				{{# layui.each(item, function(sheet_name, content) { }}
					<li class="{{sheet_name == 'Sheet1'?'layui-this':''}}">{{sheet_name}}</li>
				{{# }); }}
			  	</ul>

			  	<div class="layui-tab-content">
				{{# layui.each(item, function(sheet_name, content) { }}
					<div class="layui-tab-item {{sheet_name == 'Sheet1'?'layui-show':''}}">
						<button class="layui-btn layui-btn-normal" id="btn-{{sheet_name}}">打印数据</button>
						<table class="layui-hide" id="tableList-{{sheet_name}}" lay-filter="tableList-{{sheet_name}}"></table>
					</div>
				{{# }); }}
			  	</div>
			</div>
		{{# }) }}
	</script>
</div>
</div>
</div>
<!-- 引入脚部 -->
<script src="/asset/layui/layui.js?v=1.0.0"></script>
<script src="/asset/js/common.js?v=1.0.0"></script>
<script type="text/javascript">
    layui.use(['func','excel','laytpl','element','code','table','form'], function () {
        //声明变量
        var func = layui.func;
		var $ = layui.$;
		var excel = layui.excel;
		var laytpl = layui.laytpl;
		var element = layui.element;
        var table = layui.table,form = layui.form;
        var cols = [
            {type: 'checkbox'}
            , {field: 'id', width: 80, title: 'ID', align: 'center'}
            , {field: 'name', width: 180, title: '缴费名称', align: 'center'}
            , {field: 'dept', width: 130, title: '所属部门', align: 'center'}
            , {field: 'price', width: 120, title: '缴费金额', align: 'center'}
            , {field: 'status', width: 100, title: '状态', align: 'center', templet: '#statusTpl'}
            , {width: 180, title: '功能操作', align: 'center', toolbar: '#toolBar'}
        ];

        //【渲染TABLE】
        func.tableIns(cols, "tableList");
        //【设置弹框】
        func.setWin("缴费项目",900, 520);
        //【设置状态】
        func.formSwitch('status', null, function (data, res) {

        });
		
		/**
		 * 上传excel的处理函数，传入文件对象数组
		 * @param  {[type]} files [description]
		 * @return {[type]}       [description]
		 */
		function uploadExcel(files) {
		  layui.use(['excel', 'layer','form'], function () {
			var excel = layui.excel,form = layui.form;
			var layer = layui.layer;
			try {
			  excel.importExcel(files, {}, function (data) {
				// 如果不需要展示直接上传，可以再次 $.ajax() 将JSON数据通过 JSON.stringify() 处理后传递到后端即可
				layer.open({
					title: '文件转换结果'
					,area: ['1080px', '550px']
					,tipsMore: true
					,btn:[]
					,content: laytpl($('#excelImportAns').html()).render({data: data, files: files})
					,success: function () {
						//	element.render('tab')
						//	layui.code({})

						layui.each(data,function(key,item){
                            var layTableIndex = 1;//Object.keys(table.cache).length;
                            console.log(table.cache);
							console.log(Object.keys(table.cache).length);
							layui.each(item,function(name,value){
								var cols = [];
								var dat1={};
								var dat2={};
                                layTableIndex++;
                                if(value.length <1){
                                    return
								}
								for (var i = 0, len = Object.keys(value[0]).length;i< len;i++) {//创建闭包环境，防止变量引用错误的问题
									(function (i,layTableIndex) {
									   var field = Object.keys(value[0])[i];
									   var fieldObj = {
											field: field,
											title: value[0][field],
											width:160,
									   };
									   var cc = '<select  lay-filter="tabSelect-'+name+'-'+i+'" lay-verify="required" data-value="stu" >' +
												'<option value=""></option>' +
												'<option value="stu">学号</option>' +
												'<option value="name">姓名</option>' +
												'<option value="feeName">费用名称</option>' +
												'<option value="feeMoney">费用金额</option>' +
												'<option value="remark">备注</option>' +
												'</select>';
									   dat1[field]=cc;
									   dat2[field]="";
									   cols.push(fieldObj);
                                       form.on('select(tabSelect-'+name+'-'+i+')', function (data) {
                                            var x = document.getElementsByClassName("layui-table-cell laytable-cell-"+layTableIndex+"-0-"+i);
                                            x[2].innerText= data.value;
                                            var datax = table.cache["tableList-"+name];
                                            datax[1][field] = data.value;
                                       });
									})(i,layTableIndex);
								}

								value.shift();//把数组的第一个元素从其中删除
                                value.unshift(dat2);
                                value.unshift(dat1);

								table.render({
									elem: "#tableList-"+name,
									cols: [cols],
									data: value,
                                    cellMinWidth: 150,
									limit: value.length,
								});
							});
						});

				  }
				})
			  })
			} catch (e) {
				layer.alert(e.message)
			}
		  })
		}
		
		$('#excelImport').change(function (e) {
			// 注意：这里直接引用 e.target.files 会导致 FileList 对象在读取之前变化，导致无法弹出文件
			var files = Object.values(e.target.files)
			uploadExcel(files)
			// 变更完清空，否则选择同一个文件不触发此事件
			e.target.value = ''
		});


		$('body').on("click", "#btn-Sheet1", function() {
			var cache = table.cache["tableList-Sheet1"];
			var postData = [];
			for(var i=2;i < cache.length; i++){
				var obj = {};
				for (var j = 0, len = Object.keys(cache[i]).length;j< len;j++) {
					var field = Object.keys(cache[i])[j];
					if(cache[1][field]!= "" && field != "LAY_TABLE_INDEX"){
						obj[cache[1][field]] = cache[i][field];
					}
				}
				var arr = Object.keys(obj)
				if(arr.length >0)
					postData.push(obj);
			}
			console.log(postData);
			//layer.msg("提交成功");
			return false;
		});



        });
</script>
</body>
</html>